<template>
	<view class="picture">
		
		<text class="cuIcon-back backBtn" :style="{top: `calc(${miXinStateBar}px + 20rpx)`}" @click="PUSHPAGE()"></text>
		
		<view class="bottomHandleList flex align-center justify-between">
			<view class="bottomHandleListLeft flex align-center">
				<view class="bottomHandleListLeftContent">
					高清
				</view>
				<view class="bottomHandleListLeftContent" @click="collection">
					收藏
				</view>
				<view class="bottomHandleListLeftContent">
					讲解
				</view>
				<view class="bottomHandleListLeftContent" @click="PUSHPAGE('/pages/picture/withPainting')">
					带画
				</view>
			</view>
			<view class="bottomHandleListRight flex align-center justify-around">
				投送
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		name: 'picture',
		data(){
			return{
				
			}
		},
		onLoad() {
			this.init()
		},
		methods:{
			init(){
				
			},
			collection(){
				this.SHOW_MSG('已收藏')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.picture{
		.bottomHandleListRight{
			width: 220rpx;
			height: 86rpx;
			background: linear-gradient(142deg, #FE573C 0%, #FE573C 14%, #FE573C 30%, #F00D24 100%, #FF8B00 100%);
			border-radius: 43rpx;
			color: #FFFFFF;
			font-size: 36rpx;
		}
		.backBtn{
			position: fixed;
			left: 20rpx;
			top: 25rpx;
			font-size: 36rpx;
			color: #FFFFFF;
		}
		.bottomHandleList{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 100rpx;
			background: #FFFFFF;
		}
		.bottomHandleListLeftContent{
			margin-bottom: 10px;
			margin-top: 10rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
	}
</style>
<style>page{background: #00f;}</style>